@charset "utf-8";

@charset "utf-8";
$fontsize:40;
@function rem($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
    header {
        width: 100%;
        height: rem(130);
        background: white;
        position: absolute;
        top: 0;
        .back {
            width: rem(123);
            height: rem(57);
            float: left;
            margin-left: rem(23);
            margin-top: rem(40);
            input[type="button"] {
                width: 100%;
                height: 100%;
                font-size: rem(26);
                border: 1px solid #FF9344;
                border-radius: rem(17);
                background: #FFFFFF;
            }
        }
        .title {
            width: rem(106);
            height: rem(27);
            font-size: rem(26);
            margin: 0 auto;
            margin-top: rem(65);
        }
        .star {
            width: rem(62);
            height: rem(43);
            float: right;
            margin-top: rem(54);
            margin-right: rem(22);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: rem(130);
    bottom: 68px;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    .enter{
        width: rem(709);
        margin: 0 auto;
        .pakho{
            width: rem(170);
            height: rem(170);
            float: left;
            padding-right: rem(24);
            img{
                width: 100%;
                height: 100%;
            }
        }
        .into{
            float: right;
            a{
                font-size: rem(87);
                line-height: rem(170);
                color: #000000;
            }
        }
        .login{
            vertical-align: middle;
            h6{
                font-size: rem(30);
                color: #1c1c1c;
                line-height: rem(100);
            }
            p{
                font-size: rem(26);
                color: #9d9d9d;
            }
        }
    }
    .middle{
        width: rem(709);
        margin: 0 auto;
        margin-top: rem(28);
        .middle-top{
            font-size: rem(26);
            .green{
                width: rem(194);
                height: rem(150);
                float: left;
                background: #b2e0a0;
                div{
                    width: 100%;
                    height: rem(82);
                    text-align: center;
                    margin-top: rem(20);
                    img{
                        height: 100%;
                    }
                }
                p{
                    text-align: center;
                }
            }
            .pink{
                width: rem(194);
                height: rem(150);
                float: right;
                background: #e0b7a0;
                div{
                    width: 100%;
                    height: rem(82);
                    text-align: center;
                    margin-top: rem(20);
                    img{
                        height: 100%;
                    }
                }
                p{
                    text-align: center;
                }
            }
            .blue{
                width: rem(194);
                height: rem(150);
                margin: 0 auto;
                background: #a0dce0;
                div{
                    width: 100%;
                    height: rem(82);
                    text-align: center;
                    margin-top: rem(20);
                    img{
                        height: 100%;
                        margin-top: rem(20);
                    }
                }
                p{
                    margin-top: rem(20);
                    text-align: center;
                }
            }
        }
        .middle-bottom{
            .im-more{
                margin-top: rem(33);
                .more-left{
                    float: left;
                    font-size: rem(30);
                    .more-img{
                        width: rem(78);
                        height: rem(79);
                        float: left;
                        padding: 0 rem(9);
                        margin-left: rem(23);
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    span{
                        line-height: rem(79);
                        float: left;
                        
                    }
                }
                .more-right{
                    float: right;
                    font-size: rem(24);
                    margin-right: rem(23);
                    line-height: rem(79);
                    p{
                        color: #000;
                    }
                    i{
                        font-size: rem(24);
                        color: #FF9344;
                    }
                }
            }
            .im-more:nth-child(2){
                .more-img{
                    margin-right: rem(13);
                }
            }
            .im-more:nth-child(3){
                .more-img{
                    width: rem(94);
                    height: rem(58);
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .im-more:nth-child(4){
                .more-img{
                    margin-right: rem(13);
                }
            }
            .im-more:nth-child(1){
                .more-img{
                    margin-right: rem(13);
                }
            }
            .im-more:nth-child(5){
                margin-top: rem(79);
            }
        }
    }
    .logout{
        width: rem(246);
        height: rem(75);
        margin: 0 auto;
        margin-top: rem(36);
        input[type="button"]{
            width: rem(246);
            height: rem(75);
            background: #FF9344;
            color: #fff;
            font-size: rem(24);
            border-radius:rem(75) ;
        }
    }
}

footer {
    width: 100%;
    height: 68px;
    background: white;
    position: absolute;
    bottom: 0;
    a {
        color: #000000;
    }
    ul li {
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        padding-top: rem(16);
        box-sizing: border-box;
        i {
            color: transparent;
            -webkit-text-stroke: rem(2) #FF9344;
        }
        .iconfont{
            font-size: rem(60);
        }
        &.active .iconfont{
            color: #FF9344;
        }
        p {
            font-size: 13px;
        }
        &:hover .iconfont {
            color: #FF9344;
        }
    }
}